<script setup lang='ts'>
import myHeaderMete from "@/components/pc/myHeaderMete.vue";
import { getFB, alipayFB } from "@/api/api";
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import { ElMessage, ElMessageBox } from 'element-plus'
import mitter from "../utils/mitt";
const quetyData = useRoute()
const data = ref()
const num = ref(0)
const xData = ref(0)
const yData = ref(10)
const mail = ref()
onMounted(() => {
    getData()
    mitter.emit('thisId', { key: quetyData.query.id })
    mail.value = localStorage.getItem('mail')
})
const getData = async () => {
    const res = await getFB()
    data.value = res.data.data.slice(xData.value, yData.value)
    num.value = res.data.data.length
}
const open = (money: any, FBid: any) => {
    ElMessageBox.confirm(
        '您确定购买此账号吗？',
        '通知',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            const res = await alipayFB({ money, data: '账号购买', id: FBid })
            if (res.data.code !== '200') {
                ElMessage({
                    type: 'error',
                    message: '请先登录',
                })
                return
            }
            window.location.href = res.data.data
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消购买',
            })
        })
}
const page = ((e: number) => {
    if (e === 1) {
        xData.value = 0
        yData.value = 10
        getData()
        return
    }
    xData.value = e * 10 - 10
    yData.value = e * 10
    getData()
})
</script>

<template>
    <div class="color">
        <myHeaderMete title="账号交易" />
        <div class="content">
            <div class="data">
                <el-empty style="width: 100%;height: 800px;" v-if="data?.length === 0 ? true : false"
                    description="没数据" />
                <div class="title" v-if="data?.length === 0 ? false : true" v-for="i in data">
                    <div class="right">
                        <div class="header">
                            <span class="money">￥{{ i.money }}</span>
                            <span class="titleName">facebook账号（购买完自动发送到您邮箱里，注意查收！）</span>
                        </div>
                        <div class="text">
                            <p class="p1">类型：账号交易</p>
                            <p class="p1">发布人：管理员</p>
                        </div>
                    </div>
                    <div class="btn"><el-button type="primary" plain @click="open(i.money, i._id)">购买账号</el-button></div>
                </div>
                <div class="page" v-if="data?.length === 0 ? false : true">
                    <el-pagination background layout="prev, pager, next" @change="page" :page-size="10" :total="num" />
                </div>
            </div>
            <div class="user">
                <div class="gg">广告位置</div>
            </div>
        </div>
        <div class="s"></div>
    </div>
</template>

<style scoped>
.color {
    width: 100%;
    background-color: #f5f5f5;
}

.s {
    height: 20px;
}

.content {
    width: 1300px;
    margin: auto;
    display: grid;
    grid-template-columns: 80% 20%;
}

.data {
    min-height: 800px;
}

.s {
    height: 20px;
}

.page {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}

.userData {
    width: 100%;
    box-sizing: border-box;
    padding: 20px;
    text-align: center;
    background-color: white
}

.userimg {
    width: 100px;
    height: 100px;
    box-sizing: border-box;
    padding: 2px;
    border: 1px solid #e5e5e5;
    margin: auto;
}

.userImg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.name {
    margin-top: 20px
}

.userlook {
    width: 90%;
    margin: auto;
    position: relative;
    margin-top: 30px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.look {
    box-sizing: border-box;
    padding: 10px;
    border-top: 1px solid #e5e5e5;
    border-right: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
}

.usersum {
    box-sizing: border-box;
    padding: 10px;
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
}

.gg {
    width: 100%;
    height: 30%;
    background-color: white;
    margin-top: 10px;
}

.title {
    width: 98%;
    height: 100px;
    box-sizing: border-box;
    padding: 20px;
    background-color: white;
    display: grid;
    grid-template-columns: 85% 15%;
    margin-top: 10px;
}

.title:hover {
    box-shadow: 0 0 10px 0 rgba(111, 111, 111, .3);
}

.right {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
}

.btn {
    display: flex;
    justify-content: center;
    align-items: center;
}

.titleName {
    width: 200px;
    overflow: hidden;
    /* 隐藏超出部分 */
    white-space: nowrap;
    /* 保持文本在一行 */
    text-overflow: ellipsis;
    /* 超出部分显示省略号 */
    margin-left: 10px;
    color: #0b73bb;
}

.money {
    font-weight: bold;
    color: rgb(255, 102, 0);
}

.text {
    font-size: 12px;
    display: flex;
}

.p1 {
    color: #999;
}

.p1:nth-child(2),
.p1:nth-child(3) {
    margin-left: 20px;
}
</style>